<template>
    <div class='component-upload-single'>
        <ul class="component-upload-single__list">
            <li class="component-upload-single__item" v-if='item.src'>
                <img v-show='!item.loading' :src="item.src">
                <loading mask v-show='item.loading' mode='full' :size='14'></loading>
                <div class="component-upload-single__mask">
                    <div class="component-upload-single__operate-icon">
                        <i class="iconfont icon-chakandatu" @click='setCurrentImg(item.src)'></i>
                        <i class="iconfont icon-trash" @click='showConfirmDelete'></i>
                    </div>
                </div>
            </li>
            <li class="component-upload-single__item component-upload-single__add" v-if='!item.src'>
                <upload @done='uploadImg'>
                    <svg class="component-upload-single__add-button" viewBox="0 0 1024 1024">
                        <path d="M741.5 795.1c-15.5 0-28.2-12.6-28.2-28.2s12.6-28.2 28.2-28.2h8c96.3 0 159.9-106.9 159.9-202.9 0-105.4-91.7-190.3-196.3-192.5l-20.3-0.4-6-19.4c-29.1-94-91.9-149.1-203.7-149.1-139.5 0-229.8 103.4-229.8 240.6l0.2 0.3 2.3 25.8-25.5 4.4C168 456.3 118.4 520.2 118.4 591c0 80.1 62.1 147.8 134.5 147.8h25c15.5 0 28.2 12.6 28.2 28.2s-12.6 28.2-28.2 28.2h-25C149.9 795.1 63 701.6 63 591c0-90.4 56.5-170.2 134.7-195.2 9.8-157.2 123.3-277.6 285.5-277.6 127.5 0 211.9 66 251.2 170.2 127.3 13.7 229.1 117.5 229.1 247.5-0.1 120.9-81.2 255.4-222 259.2z"></path>
                        <path d="M515.3 559.1L425 658.7c-7.9 8.2-20.6 8.2-28.5 0l-7.1-5.7c-7.9-8.2-7.9-18 0-26.3l104.2-114.2c0.1-0.2 0.2-0.3 0.3-0.5l7.1-7.5c3.9-4.1 9.1-6.2 14.3-6.1 5.2 0 10.4 2 14.3 6.1l7.1 7.5c0.1 0.1 0.2 0.3 0.3 0.5l101.6 112.4c7.9 8.2 7.9 21.5 0 29.8l-7.1 3.9c-7.9 8.2-20.6 6.5-28.5-1.8l-87.7-97.7z"></path>
                        <path d="M515 902c-15.5 0-28.2-12.6-28.2-28.2V564.2c0-15.6 12.6-28.2 28.2-28.2 15.5 0 28.2 12.6 28.2 28.2v309.7c0 15.5-12.6 28.1-28.2 28.1z"></path>
                    </svg>
                </upload>
            </li>
        </ul>

        <image-view
            v-if='currentImg'
            :show='show_modal_img' 
            :url='currentImg'
            fixed
            @close='show_modal_img = false'>
        </image-view>

        <confirm
            title='确认删除图片'
            fixed
            :show='show_confirm_delete'
            @close='show_confirm_delete = false'
            @confirm='removeCurrentImg'></confirm>
    </div>
</template>

<script>
    import  { mapGetters, mapActions }  from 'vuex'
    import { storageApi } from '../api/api'

    export default {
        props:{
            value:String,
            type:{
                type: String,
                default: 'image'
            },
            multiple:Boolean
        },
        data() {
            return {
                fileData:'',
                fileLoading:false,
                localIds:'',
                currentImg:'',
                curIndex:'',
                show_modal_img:false,
                show_confirm_delete:false,
                imgList:[],
                item:{}
            }
        },
        computed:{

        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),
            setCurrentImg(url){
                this.show_modal_img = true
                this.currentImg = url
            },
            showConfirmDelete(){
                this.show_confirm_delete = true
            },
            removeCurrentImg(){
                this.item = {}
                this.$emit('input','')
                this.show_confirm_delete = false
            },
            uploadImg(fileData){
                let uploadFile

                this.item = {
                    src:fileData,
                    loading:true
                }
                uploadFile = fileData.result
                storageApi.uploadBase64({
                    base64:uploadFile,
                })
                .then(result=>{
                    this.item.src = result.url
                    this.item.loading = false
                    this.$emit('input',result.url)
                })
                .catch(error => {
                    this.item = {}
                })
            },
            init(value){
                this.item = {
                    src:value
                }
            }
        },
        created(){
            this.init(this.value)
        },
        watch: {
            'value'(newVal,oldVal){
                console.log(newVal)
                console.log(oldVal)
                if(newVal !== oldVal) {
                    this.init(newVal)
                }
            }
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .component-upload-single{

    }
    .component-upload-single__list{
        overflow:hidden;
    }
    .component-upload-single__item{
        cursor:pointer;
        transition:ease all 250ms;
        float:left;
        margin-left:10px;
        margin-top:5px;
        margin-bottom: 5px;
        width: 120px;
        height: 120px;
        border:1px solid $sectionColor;
        border-radius: 4px;
        position: relative;
        overflow:hidden;
        img{
            max-width: 100%;
            position: absolute;
            left:50%;
            top:50%;
            transform:translate(-50%,-50%);
        }
        .component-upload{
            height: 100%;
        }
        .component-upload__content{
            height: 100%;
        }
        &:hover{
            .component-upload-single__add-button{
                fill:$green;
            }
            .component-upload-single__mask{
                opacity:1;
            }
        }
    }
    .component-upload-single__add{
        &:hover{
            border-color: $green;
        }
    }
    .component-upload-single__add-button{
        position: absolute;
        top:50%;
        left:50%;
        margin: -25px 0 0 -25px;
        width: 50px;
        height: 50px;
        transition:ease all .3s;
    }
    .component-upload-single__mask{
        transition:all ease 200ms;
        opacity:0;
        position: absolute;
        top:0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.8);
        .component-upload-single__operate-icon{
            color:#fff;
            position: absolute;
            left: 0;
            right: 0;
            text-align: center;
            top:0;
            bottom:0;
            .iconfont{
                display: block;
                width: 100%;
                font-size: 25px;
                box-sizing: border-box;
                height:60px;
                line-height: 60px;
                &:hover{
                    color:$red;
                    background-color: rgba(0, 0, 0, 0.95);
                }
                &.disabled{
                    pointer-events:none;
                    color:#5a5a5a;
                }
            }
            .icon-arrow.left{
                transform:rotate(180deg);
            }
            .icon-trash{
                font-size: 27px;
            }
        }
    }
</style>


